<template>
  <div class="">
    <!-- <img class="pageImg" src="../../assets/img/page.png" alt="" /> -->
    <div class="amap-wrapper">
      <el-amap
        class="amap-box"
        :amapManager="amapManager"
        :events="mapEvents"
        :zoom="zoom"
        :center="center"
        vid="'amapDemo'"
      >
        <!-- 绘制绘制车站 -->
        <el-amap-marker
          v-for="marker in markers"
          :key="marker.id"
          :position="marker.position"
          :events="marker.events"
          :visible="marker.visible"
          :content="marker.content"
          :draggable="marker.draggable"
          :vid="marker.id"
        ></el-amap-marker>
        <!-- 绘制上行星链设备 -->
        <div v-for="marker in upLine" :key="marker.id">
          <!-- 星链设备 -->

          <el-amap-marker
            :position="marker.alert.position"
            :events="marker.alert.events"
            :visible="marker.alert.visible"
            :content="marker.alert.content"
            :draggable="marker.alert.draggable"
            :vid="marker.alert.id"
          ></el-amap-marker>
          <el-amap-marker
            :position="marker.device.position"
            :events="marker.device.events"
            :visible="true"
            :content="marker.device.content"
            :draggable="marker.device.draggable"
            :vid="marker.device.id"
          ></el-amap-marker>
          <!-- 星链状态 -->
        </div>

        <!-- 绘制下行星链设备 -->
        <el-amap-marker
          v-for="(marker, index) in downLine"
          :key="index"
          :position="marker.position"
          :events="marker.events"
          :visible="marker.visible"
          :content="marker.content"
          :draggable="marker.draggable"
          :vid="index"
        ></el-amap-marker>
      </el-amap>
      <!-- 左侧内容 -->
      <div class="screen-left-container">
        <h1>
          <img class="starlink-logo" src="../../assets/img/logo.png" alt="" />
          轨道星链中心监管平台
        </h1>
        <div>
          <h3 class="item-h3">设备信息</h3>
          <div class="item-box  item-box-1">
            <div class="progress-box">
              <div class="progress-left">
                <h3>正常/异常设备数量</h3>
                <a-progress
                  type="circle"
                  :width="150"
                  status="active"
                  :percent="calcDeviceError"
                >
                  <template #format="percent">
                    <span class="pro-text">{{ percent }}%</span>
                  </template></a-progress
                >
              </div>
              <div class="progress-right">
                <p>正常设备</p>
                <p>84</p>
                <p class="device_num_p">异常设备</p>
                <p>21</p>
              </div>
            </div>

            <div id="main2" style="width:420px;height:300px"></div>
          </div>
        </div>
        <div>
          <h3 class="item-h3">线路告警信息</h3>
          <div class="item-box item-box-2">
            <screen-table :columns="columns" :data="tableData"></screen-table>
          </div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="screen-right-container">
        <h1>{{ currentDate }}</h1>
        <div>
          <h3 class="item-h3">设备告警信息</h3>
          <div class="item-box item-box-3">
            <div id="main" style="width:420px;height:300px"></div>
          </div>
        </div>
        <div>
          <h3 class="item-h3">运维信息</h3>
          <div class="item-box item-box-4">
            <screen-table :columns="columns2" :data="tableData2"></screen-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueAMap from 'vue-amap';
import ScreenTable from '../../components/screentable/screenTable.vue';
import * as echarts from 'echarts';
let amapManager = new VueAMap.AMapManager();

export default {
  props: {},
  data() {
    return {
      columns: [
        {
          title: '星链ID',
          dataIndex: 'starlinkId',
          key: 'starlinkId',
        },
        {
          title: '内容详情',
          dataIndex: 'alarm_msg',
          key: 'alarm_msg',
        },
        {
          title: '告警等级',
          dataIndex: 'level',
          key: 'level',
        },
        {
          title: '告警时间',
          dataIndex: 'time',
          key: 'time',
        },
      ],
      columns2: [
        {
          title: '星链ID',
          dataIndex: 'starlinkId',
          key: 'starlinkId',
        },
        {
          title: '检修内容',
          dataIndex: 'check_msg',
          key: 'check_msg',
        },
        {
          title: '检查日期',
          dataIndex: 'check_time',
          key: 'check_time',
        },
        {
          title: '剩余天数',
          dataIndex: 'day',
          key: 'day',
        },
      ],
      tableData: [
        {
          starlinkId: '02ae01',
          alarm_msg: '障碍物',
          level: '高',
          time: '2021-06-01',
        },
        {
          starlinkId: '02ae02',
          alarm_msg: '障碍物',
          level: '高',
          time: '2021-06-01',
        },
        {
          starlinkId: '02ae03',
          alarm_msg: '障碍物',
          level: '高',
          time: '2021-06-01',
        },
        {
          starlinkId: '02ae04',
          alarm_msg: '障碍物',
          level: '高',
          time: '2021-06-01',
        },
      ],
      tableData2: [
        {
          starlinkId: '02ae01',
          check_msg: '设备外观监测',
          check_time: '2021-06-01',
          day: '3天',
        },
        {
          starlinkId: '02ae02',
          check_msg: '设备外观监测',
          check_time: '2021-06-01',
          day: '3天',
        },
        {
          starlinkId: '02ae03',
          check_msg: '设备外观监测',
          check_time: '2021-06-01',
          day: '3天',
        },
        {
          starlinkId: '02ae04',
          check_msg: '设备外观监测',
          check_time: '2021-06-01',
          day: '3天',
        },
        {
          starlinkId: '02ae05',
          check_msg: '设备外观监测',
          check_time: '2021-06-01',
          day: '3天',
        },
        {
          starlinkId: '02ae06',
          check_msg: '设备外观监测',
          check_time: '2021-06-01',
          day: '3天',
        },
        {
          starlinkId: '02ae07',
          check_msg: '设备外观监测',
          check_time: '2021-06-01',
          day: '3天',
        },
        {
          starlinkId: '02ae08',
          check_msg: '设备外观监测',
          check_time: '2021-06-01',
          day: '3天',
        },
      ],

      star_error: {
        normal: 2,
        abnormal: 10,
      },
      amapManager,
      zoom: 15,
      center: [116.16472, 39.921763], // 地图初始化视图中心点
      mapEvents: {
        init(o) {
          o.setMapStyle('amap://styles/5e009d74b5bb6b241d3e6cd21bb1bfc1'); //自定义的高德地图的样式，我选的是马卡龙
        },
      },
      starlink: [
        {
          position: [116.155132, 39.934542],
          visible: false,
          status: 1,
          id: 1,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.156132, 39.933542],
          visible: true,
          status: 1,
          id: 2,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.157132, 39.932242],
          visible: false,
          status: 1,
          id: 3,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.158132, 39.931242],
          visible: false,
          status: 1,
          id: 4,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.158832, 39.930242],
          visible: false,
          status: 1,
          id: 5,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.159832, 39.928242],
          visible: false,
          status: 1,
          id: 6,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.160832, 39.926242],
          visible: false,
          status: 1,
          id: 7,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.160832, 39.924242],
          visible: false,
          status: 1,
          id: 8,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.160832, 39.922242],
          visible: false,
          status: 1,
          id: 9,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.161832, 39.920242],
          visible: false,
          status: 1,
          id: 10,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.163832, 39.918242],
          visible: true,
          status: 0,
          id: 11,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '异常原因:xx',
            '异常时间:2021/7/2 15:58:55',
          ],
        },
        {
          position: [116.164832, 39.916242],
          visible: false,
          status: 1,
          id: 12,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.166632, 39.914242],
          visible: false,
          status: 1,
          id: 13,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.168032, 39.912242],
          visible: false,
          status: 1,
          id: 14,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.170032, 39.910242],
          visible: false,
          status: 1,
          id: 15,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
        {
          position: [116.172032, 39.908242],
          visible: false,
          status: 1,
          id: 16,
          text: [
            'ID:123',
            'Link:23 Offset:23',
            '延迟:10ms',
            '温度:13℃',
            'Cpu占有率:12%',
          ],
        },
      ],
      downStar: [
        { position: [116.150132, 39.933542] },
        { position: [116.151132, 39.932542] },
        { position: [116.152132, 39.931242] },
        { position: [116.153132, 39.930242] },
        { position: [116.153832, 39.929242] },
        { position: [116.154832, 39.927242] },
        { position: [116.155832, 39.925242] },
        { position: [116.155832, 39.923242] },
        { position: [116.155832, 39.921242] },
        { position: [116.156832, 39.919242] },
        { position: [116.157832, 39.917242] },
        { position: [116.158832, 39.915242] },
        { position: [116.161632, 39.913242] },
        { position: [116.163032, 39.911242] },
        { position: [116.165032, 39.909242] },
        { position: [116.167032, 39.907242] },
      ],

      upLine: [],
      downLine: [],
      markers: [
        {
          position: [116.153023, 39.9326],
          name: '车站',
          id: 's1',
          events: {
            click: () => {
              // alert('click marker');
              this.onMarkerClick(this.markers[0]);
              this.markers[0].content = '555';
            },
            dragend: (e) => {
              console.log('---event---: dragend');
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          content: '<div class="station">金顶街站</div>',
          visible: true,
          draggable: false,
          template: '<span>1</span>',
        },
        {
          position: [116.157359, 39.924825],
          name: '车站',
          id: 's2',
          events: {
            click: () => {
              // alert('click marker');
              this.onMarkerClick(this.markers[0]);
              this.markers[0].content = '555';
            },
            dragend: (e) => {
              console.log('---event---: dragend');
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          content: '<div class="station">金安桥站</div>',
          visible: true,
          draggable: false,
          template: '<span>1</span>',
        },
        {
          position: [116.161505, 39.914918],
          name: '车站',
          id: 's3',
          events: {
            click: () => {
              // alert('click marker');
              this.onMarkerClick(this.markers[0]);
              this.markers[0].content = '555';
            },
            dragend: (e) => {
              console.log('---event---: dragend');
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          content: '<div class="station">北辛安路站</div>',
          visible: true,
          draggable: false,
          template: '<span>1</span>',
        },
        {
          position: [116.167264, 39.908565],
          name: '车站',
          id: 's4',
          events: {
            click: () => {
              // alert('click marker');
              this.onMarkerClick(this.markers[0]);
              this.markers[0].content = '555';
            },
            dragend: (e) => {
              console.log('---event---: dragend');
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          content: '<div class="station">首钢站</div>',
          visible: true,
          draggable: false,
          template: '<span>1</span>',
        },
      ],
      currentDate: '',
    };
  },
  computed: {
    calcDeviceError() {
      let num =
        this.star_error.abnormal /
        (this.star_error.normal + this.star_error.abnormal);
      num = parseInt(num * 100);
      return num;
    },
  },
  created() {},
  mounted() {
    this.setStarlinkDevice();
    this.afterStatLinkErrorNum();
    this.afterStatLinkErrorNum2();
    this.getTime();
  },
  methods: {
    // 获取当前时间
    getTime() {
      setInterval(() => {
        let dayjs = require('dayjs');
        let now = dayjs();
        this.currentDate = now.format('YYYY-MM-DD HH:mm:ss');
      }, 1000);
    },
    afterStatLinkErrorNum() {
      //  重新渲染图表
      var myChart = echarts.init(document.getElementById('main'), 'dark');
      // 绘制图表
      myChart.setOption({
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {},
        title: {
          text: '告警种类及次数',
          textStyle: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: '14',
          },
        },
        xAxis: {
          type: 'category',
          name: '设备',
          data: ['cpu', '温度', '线程', '通信中断', '其他'],
        },
        yAxis: {
          name: '数量',
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: 20,
            data: [11, 21, 32, 14, 25],
          },
        ],
      });
    },
    afterStatLinkErrorNum2() {
      //  重新渲染图表
      var myChart = echarts.init(document.getElementById('main2'), 'dark');
      // 绘制图表
      myChart.setOption({
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {},
        title: {
          text: '设备异常数量统计',
          textStyle: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: '14',
          },
        },
        xAxis: {
          type: 'category',
          name: '日期',
          data: ['02/01', '02/07', '02/15', '02/22', '03/01'],
        },
        yAxis: {
          name: '数量',
        },
        series: [
          {
            name: '数量',
            type: 'line',
            smooth: true,
            data: [11, 21, 32, 14, 25],
          },
        ],
      });
    },
    // 获取星链设备
    setStarlinkDevice() {
      // 设备和弹框分开

      this.starlink.forEach((item, index) => {
        let alertTextDom = '';
        item.text.forEach((item2) => {
          alertTextDom += `<p>${item2}</p>`;
        });
        let deviceSrc = item.status
          ? 'http://172.51.215.159:30080/downloads/success-box.png'
          : 'http://172.51.215.159:30080/downloads/alert-box.png';
        let domText = `<div class="star-device-item"><img v-if="" class="${
          item.status ? 'device-box' : 'device-box-alert'
        }" src="${deviceSrc}" alt=""><div class="${
          item.status ? 'content-text' : 'content-text-alert'
        }">${alertTextDom}</div></div>`;
        let dom = `<div class="star-device-item"><img class="device" src="http://172.51.215.159:30080/downloads/success-left-device.png" alt=""></div>`;
        this.upLine.push({
          device: {
            ...item,
            name: '星链设备1',
            events: {
              click: (e) => {
                console.log('*****************', e, index);
                this.upLine[index].alert.visible = !this.upLine[index].alert
                  .visible;
                console.log(this.upLine[index]);
                // alert('click marker');
              },
              dragend: (e) => {
                console.log('---event---: dragend', e);
              },
            },
            content: dom,
            draggable: false,
          },
          alert: {
            ...item,
            name: '星链设备1',
            events: {
              click: () => {
                // alert('click marker');
              },
              dragend: (e) => {
                console.log('---event---: dragend');
                this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
              },
            },
            content: domText,
            draggable: false,
          },
        });
      });
      this.downStar.forEach((item) => {
        this.downLine.push({
          ...item,
          name: '星链设备1',
          events: {
            click: () => {
              // alert('click marker');
              this.onMarkerClick(this.markers[0]);
              this.markers[0].content = '555';
            },
            dragend: (e) => {
              console.log('---event---: dragend');
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          content:
            '<img src="http://172.51.215.159:30080/downloads/success-right-device.png" alt="">',
          visible: true,
          draggable: false,
          template: '<span>1</span>',
        });
      });
    },
    onMarkerClick(marker) {
      console.log(marker);
      this.currentMarker = marker;
    },
  },
  components: { ScreenTable },
};
</script>

<style lang="less">
.progress-box {
  height: 210px;
  .progress-left {
    width: 260px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    h3 {
      display: block;
      color: #fff;
      margin: 0;
      padding: 0;
      font-size: 14px;
      text-align: left;
      margin-bottom: 20px;
    }
    .pro-text {
      color: #fff;
      font-size: 30px;
    }
  }
  .progress-right {
    width: 100px;
    display: inline-block;
    vertical-align: top;
    padding-top: 60px;
    p {
      color: #fff;
      margin: 0;
      padding: 0;
      text-align: center;
      font-size: 16px;
    }
    .device_num_p {
      margin-top: 20px;
    }
  }
}
.item-box {
  width: 100%;
  height: 400px;
  background: rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
.item-box-1 {
  height: 500px;
  padding: 20px;
}
.item-box-2 {
  height: calc(100vh - 140px - 500px - 120px);
}
.item-box-3 {
  height: 300px;
  padding: 20px;
}
.item-box-4 {
  height: calc(100vh - 140px - 300px - 120px);
}
.item-h3 {
  color: #fff;
  margin: 20px 0 20px 0;
  padding: 0 0 0 10px;
  font-size: 20px;
  position: relative;
  line-height: 30px;
}
.item-h3::before {
  width: 3px;
  height: 20px;
  content: '';
  display: block;
  background: #07d1d3;
  position: absolute;
  left: -4px;
  top: 7px;
}
.screen-left-container {
  width: 500px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  color: #fff;
  padding-left: 30px;
  padding-top: 40px;
  box-sizing: border-box;

  h1 {
    font-size: 40px;
    color: #fff;
    height: 60px;
  }
  .starlink-logo {
    width: 44px;
    margin-right: 10px;
  }
}
.screen-right-container {
  width: 500px;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  color: #fff;
  padding-right: 40px;
  padding-top: 40px;
  box-sizing: border-box;
  h1 {
    font-size: 24px;
    color: #fff;
    height: 60px;
    line-height: 60px;
    text-align: right;
  }
}
.test {
  position: fixed;
  top: 0;
}
.amap-wrapper {
  width: 100%;
  height: 100vh;
}
.test {
  color: #fff;
  opacity: 0.3;
}
.text-1 {
  color: #fff;
  width: 100px;
  font-size: 16px;
}
.station {
  color: #23fbff;
  border: 2px solid #23fbff;
  width: 90px;
  text-align: center;
  border-radius: 4px;
  line-height: 32px;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
}
.station::before {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  background: #23fbff;
  position: absolute;
  top: -10px;
  left: 3px;
}
.station::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  background: #23fbff;
  position: absolute;
  bottom: -10px;
  left: 3px;
}
.star-device-item {
  width: 53px;
  height: 53px;
  position: relative;
}
.device {
  width: 45px;
  height: 53px;
  display: block;
  position: absolute;
  left: 0px;
  bottom: 0px;
}
.device-box {
  width: 174px;
  display: block;
  height: 108px;
  position: absolute;
  left: 34px;
  bottom: 10px;
}
.device-box-alert {
  width: 192px;
  display: block;
  height: 82px;
  position: absolute;
  left: 34px;
  bottom: 10px;
}
.content-text {
  width: 174px;
  display: block;
  height: 108px;
  position: absolute;
  color: #23fbff;
  left: 84px;
  bottom: 4px;
}
.content-text-alert {
  width: 192px;
  display: block;
  height: 82px;
  position: absolute;
  color: #dc3b3f;
  left: 76px;
  bottom: 2px;
}
.content-text p {
  padding: 0;
  margin: 0;
  line-height: 14px;
  font-size: 12px;
  width: 100%;
}
.content-text-alert p {
  padding: 0;
  margin: 0;
  line-height: 14px;
  font-size: 12px;
  width: 100%;
}
</style>
